<template>
  <div id="container">
    <div class="header">{{decodeURI(companyInfo.companyName)}}</div>
    <div class="pwd-input">
      <input v-model="inputPasswordCount" placeholder="输入新增投影口令的数量"/>
      <button @click="generatePasswordHandle">确定</button>
    </div>
    <div class="pwd-table">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr class="table-title">
          <th>创建时间</th>
          <th>投影口令</th>
          <th>绑定班组</th>
        </tr>
        <tr class="table-content" v-for="(item, index) in passwordList" :key="index" v-trans :style="index">
          <td>{{ item.createTime | formatDate }}</td>
          <td>{{ item.password }}</td>
          <td v-bind:class="item.binded ? colorGreen : colorRed">{{ item.binded ? '是' : '否' }}</td>
        </tr>
    </table>
    </div>
  </div>
</template>

<script>
  import { apiConstants } from '@/js/utils'
    import {formatDate} from '../../js/utils/date'
    export default {
      name: "generatePassword",
      props:['passwordList','companyInfo'],
      data(){
            return {
              inputPasswordCount: '',
              colorGreen: 'color-green',
              colorRed: 'color-red'
            }
        },
      filters:{
        formatDate(time) {
          return formatDate(time, 'yyyy-MM-dd hh:mm')
        }
      },
      methods: {
        generatePasswordHandle(){
          let _this = this;
          if(typeof value !== 'number' && isNaN(parseInt(_this.inputPasswordCount))){
            _this.$Message({
              content: "输入的格式错误",
              time: 1500,
              type: "default",
              hasClose: true
            });
            return;
          }
          if(_this.inputPasswordCount>100){
            _this.inputPasswordCount = "";
            _this.$Message({
              content: "数量不能超过100",
              time: 1500,
              type: "default",
              hasClose: true
            });
            return;
          }
          if(!_this.inputPasswordCount){
            _this.inputPasswordCount = "";
            _this.$Message({
              content: "数量不能为空或0",
              time: 1500,
              type: "default",
              hasClose: true
            });
            return;
          }
          _this.$ajax(apiConstants.company_generatePasswords, {
            data: {companyId: _this.companyInfo.id, count: _this.inputPasswordCount},
            success: function (data) {
              _this.getPasswords();

              if(_this.passwordList.length>9){
                let trList = document.getElementsByClassName("table-content");
                // table中tr从下标2开始
                for(let i=0; i<parseInt(_this.inputPasswordCount); i++){
                  trList[i].style.backgroundColor = '#3c6effc7';
                  trList[i].style.transition = "background-color 1.5s";
                  trList[i].style.color = "white";
                  setTimeout(()=>{
                    trList[i].style.backgroundColor = 'white';
                    trList[i].style.color = "#333";
                  },1500);
                }
              }


              _this.inputPasswordCount = '';
            }
          })
        },
        getPasswords(){
          let _this = this;
          _this.$ajax(apiConstants.company_getPasswords, {
            data: {companyId: _this.companyInfo.id},
            success: function (data) {
              _this.passwordList = data;
            }
          })
        },
      },
      created(){

      },
      mounted(){
      }
    }
</script>

<style lang="scss" scoped>
 #container{
   padding: .4rem .3rem 0;
   .header{
     font-size: .36rem;
     text-align: center;
     letter-spacing: 1px;
     font-weight: 600;
   }
   .pwd-input{
     text-align: center;
     margin: .4rem 0;
     display: flex;
     flex-direction: row;
     input{
       font-size: .28rem;
       background-color: #F5F6F8;
       border: none;
       padding: .28rem .88rem .28rem .3rem;
       border-radius: 10px 0 0 10px;
       flex:1;
     }
     button{
       outline: none;
       border: none;
       background-color: #3C6EFF;
       color: white;
       font-size: .28rem;
       padding: .28rem .72rem;
       border-radius: 0px 10px 10px 0px;
     }
   }
   .pwd-table{
     table tr:first-child th:first-child{
       border-radius: .13rem 0 0 0;
     }
     table tr:first-child th:last-child{
       border-radius: 0 .13rem 0 0;
     }
     table tr:last-child td:first-child{
       border-radius: 0 0 0 .13rem;
     }
     table tr:last-child td:last-child{
       border-radius: 0 0 .13rem 0;
     }
     table{
       width: 100%;
       margin-bottom: 0.5rem;
       tr > th,td{
         padding:.3rem .24rem;
         font-size: .26rem;
         text-align: center;
       }
       .table-title{
         th:first-child{
           background-color: #F5F6F8;
           border-top: 1px solid #E9E9E9;
           border-left: 1px solid #E9E9E9;
         }
       }
       .table-title:nth-child(1){
         th{
           background-color: #F5F6F8;
           border-top: 1px solid #E9E9E9;
           border-right: 1px solid #E9E9E9;
           border-bottom: 1px solid #E9E9E9;
         }
       }
       .table-content{
         td:first-child{
           border-right: 1px solid #E9E9E9;
           border-left: 1px solid #E9E9E9;
           border-bottom: 1px solid #E9E9E9;
         }
         td:nth-child(2){
           border-right: 1px solid #E9E9E9;
           border-bottom: 1px solid #E9E9E9;
           color: #3C6EFF;
         }
         td:last-child{
           border-right: 1px solid #E9E9E9;
           border-bottom: 1px solid #E9E9E9;
         }
       }
     }
   }


 }
  .color-red{
    color:red;
  }
 .color-green{
   color:green;
 }
</style>
